<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    $(async function(){
        var user = getCookie("lgc");
        if(!user){
            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
        }

        var result = await searchShoppingCarByUser({user});  //await 异步改同步
        console.log(result);
        var {status,list} = result;

        if(status){
            var html = "";
            list.forEach(({id,goodsId,goodsName,goodsPrice,goodsImg,buyNum,subtotal,isChecked})=>{
                html +=` <tr data-id="${id}">
                    <td class="checkbox"><input class="check-one check" ${isChecked?"checked":""} type="checkbox" /></td>
                    <td class="goods">
                        <img src="${goodsImg}" alt="" />
                        <span>${goodsName}</span>
                        </td>
                    <td class="price">${goodsPrice}</td>
                    <td class="count"><span class="reduce">${buyNum>1?"-":""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${subtotal}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
            })
            $(".catbox tbody").html(html);
        }

        isAllChecked();
        getTotal();
        // $(document).on("click",".check-all",function(){
        //     var status = $(this).prop("checked");
        //     $(".check-one").prop("checked",status);
        //     getTotal();
        // })
        $(".check-all").click(async function(){
            // var status = this.checked;
            var status = $(this).prop("checked"); //状态 true:false
            
            var list = $(".check-one").parents("tr").map(function(){
                return $(this).attr("data-id");
            }).get();
            for(let i = 0;i<list.length;i++){
                let id = list[i];
                console.log(status,id);
                var result =  await updateGoodsChecked({type:status*1,id})
                var {status:flag,msg} = result;
                if(!flag) throw msg;
            }
            
            // var id = $(this).parents("tr").attr("data-id");
            // var result =  await updateGoodsChecked({type:status*1,id})
            // var {status,msg} = result;
            // if(!result) throw msg;
            $(".check-one").prop("checked",status);
            getTotal();
        })

        $(".check-one").click(async function(){
            // var flag = true;
            // $(".check-one").each(function(){
            //     if(!$(this).prop("checked")){
            //         flag = false;
            //     }
            // })
            // $(".check-all").prop("checked",flag);
            var status = $(this).prop("checked");  //状态 true:false
            var id = $(this).parents("tr").attr("data-id");
            var result =  await updateGoodsChecked({type:status*1,id})
            var {status,msg} = result;
            if(!status) throw msg;

            isAllChecked();
            getTotal();
        
        })

        $(".add").click( async function(){
            var id = $(this).parents("tr").attr("data-id");
            var result = await addGoods({id});
            var {status,msg} = result;
            if(!status) throw msg;

            var num = $(this).prev().val();
            num++;
            $(this).prev().val(num);

            var price = $(this).parent().prev().text()*1;
            var subtotal = (num*price).toFixed(2);
            $(this).parent().next().text(subtotal)

            $(this).prev().prev().text("-");
            getTotal();
        })

        $(".reduce").click(async function(){
            var id = $(this).parents("tr").attr("data-id");
            var result = await reduceGoods({id});
            var {status,msg} = result;
            if(!status) throw msg;


            var num = $(this).next().val();
            if(num==1)  return false;
            num--;
            if(num == 1)  $(this).text("");
            $(this).next().val(num);

            var price = $(this).parent().prev().text()*1;
            var subtotal = (num*price).toFixed(2);
            $(this).parent().next().text(subtotal)
            getTotal();
        })

        $(".delete").click( async function(){
            if(confirm("是否删除该数据?")){
                var id = $(this).parents("tr").attr("data-id");
                var result = await delGoods({ids:id});
                var {status,msg} = result;
                if(!status) throw msg;

                $(this).parents("tr").remove();
                isAllChecked();
                getTotal();
            }
        })

        $("#deleteAll").click( async function(){
            if($(".check-one:checked").length>0){
                if(confirm("是否删除选中的商品?")){
                    var list = $(".check-one:checked").parents("tr").map(function(){
                        return $(this).attr("data-id")
                    }).get();
                    console.log(list);

                    var result = await delGoods({ids:list.join(",")});
                    var {status,msg} = result;
                    if(!status) throw msg;

                    $(".check-one:checked").parents("tr").remove();
                    isAllChecked();
                    getTotal();
                }
            }else{
                alert("您还未选中任何商品!")
            }
        })  



        function isAllChecked(){
            if($(".check-one").length&&$(".check-one:checked").length == $(".check-one").length){
                $(".check-all").prop("checked",true);
            }else{
                $(".check-all").prop("checked",false);
            }
        }


        function getTotal(){
            var sum = 0;
            var allPrice = 0;
            $(".check-one:checked").each(function(){
                var num = $(this).parents("tr").find(".count-input").val()*1;
                var subtotal = $(this).parents("tr").find(".subtotal").text()*1;

                sum += num;
                allPrice += subtotal;
            })
            $("#selectedTotal").text(sum);
            $("#priceTotal").text(allPrice.toFixed(2));
        
        }

    })

</script>
</html>